<template lang='pug'>
  Modal.lzw-modal-style-2.charging-scheme-detail(v-model="show" title="收费方案" fullscreen)
    Spin(v-if="spinLoading" fix size="large")
    Form(ref="detailInfo" :model="detailInfo" :rules="ruleValidate" :label-width="120")
      Row(type="flex" justify="start" :gutter="16")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem(label="收费方案类型：" :label-width="130")
            Select.input-has-border.c-333(v-model="category"  placeholder="请选择收费类型" disabled)
              Option(v-for="(item, index) in chargingTypeArr" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem(label="收费方案名称：" prop="name"  :label-width="130")
            Input.input-has-border(v-model="detailInfo.name"  :readonly="disabled")
        //- Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" v-if="isFuwufei")
        //-   FormItem.ivu-form-item-required(label="是否跟随保险收费：" :label-width="150")
        //-     i-switch(v-model="detailInfo.hasInsure")
        //-       span(slot="open") 是
        //-       span(slot="close") 否
    Divider.mt-0
    div.pos-r
      RadioGroup(v-model="detailInfo.charge" style="display:block")
        Radio.card.mb-15(v-show="isSb" :label="1" :disabled="disabled") 当月新增当月收费
        Radio.card.mb-15(v-show="isXinzi" :label="5" :disabled="disabled") 当月新增次月收费
        Radio.card.mb-15(v-show="isSb" :label="2" :disabled="disabled")
          | 预收：
          Input.input-has-border(v-model="detailInfo.advanceMonths" type="number" style="width:100px" :readonly="disabled")
          | 个月
          span.early-collection.ml-30 是否提前收取：
            i-switch(v-model="detailInfo.isAhead" :disabled="disabled")
              span(slot="open") 是
              span(slot="close") 否
          span.early-collection.ml-30 是否按照四季划分：
            i-switch(v-model="detailInfo.isQuarterStart")
              span(slot="open") 是
              span(slot="close") 否
          span.early-collection(v-if="detailInfo.isQuarterStart")
            span.ml-30 开始月份：
            Select.input-has-border(v-model="detailInfo.quarterStart"  placeholder="请选择"  style="width:100px")
              Option(v-for="(item, idx) in monthArr" :value="item.key" :key="idx") {{ item.value }}
            span.ml-30 中途变动是否出具账单：
              i-switch(v-model="detailInfo.isBuildBill" :true-value="1" :false-value="0")
                span(slot="open") 是
                span(slot="close") 否
    .text-center(slot="footer")
      Button(@click="cancel") 关闭
      Button(type="info" @click="submitBtn('detailInfo')" :disabled="disabled") 保存
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
export default {
  name:'',
  props:{
    category: Number,
    chargingTypeArr: Array,
    detailInfo: Object
  },
  data () {
    return {
      show:false,
      disabled: true,
      spinLoading: true,
      isSb: true,
      isXinzi: true,
      ruleValidate: {
        name: [
          { required: true, message: '请输入方案名称', trigger: 'blur' }
        ]
      },
      monthArr: [
        {key: 1, value: '1月'},
        {key: 2, value: '2月'},
        {key: 3, value: '3月'},
        {key: 4, value: '4月'},
        {key: 5, value: '5月'},
        {key: 6, value: '6月'},
        {key: 7, value: '7月'},
        {key: 8, value: '8月'},
        {key: 9, value: '9月'},
        {key: 10, value: '10月'},
        {key: 11, value: '11月'},
        {key: 12, value: '12月'},
      ],
    };
  },

  components: {},

  computed: {
  },

  beforeMount() {},

  mounted() {},

  methods: {
    openModal () {
      this.show = true
    },
    cancel () {
      this.spinLoading = true
      this.show = false
      // this.$emit('on-cancel')
    },
    submitBtn (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          InsureProjectApi.PostInsureProject(this.detailInfo).then(res => {
            if (res.data.success) {
              this.$Message.success(res.data.message)
              this.$emit('get-list')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {

        }
      })
    }
  },

  watch: {
    'detailInfo.category': {
      handler(newVal, oldVal) {
        console.log(newVal)
        const type = [1, 2, 4, 8]
        const type_2 = [1, 2, 4]
        if (type.includes(newVal)) {
          this.isSb = true
        } else {
          this.isSb = false
        }
        if (type_2.includes(newVal)) {
          this.isXinzi = true
        } else {
          this.isXinzi = false
        }
      },
      immediate: true,
      deep: true
    },
    'detailInfo.id': {
      handler(newVal, oldVal) {
        this.spinLoading = false
      },
      immediate: true,
      deep: true
    }
  }

}

</script>
<style lang="less">
  .c-333{
     .ivu-select-selection {
      color: #333 !important;
    }
  }
</style>


<style lang='less' scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .pos-r{
    position: relative;
  }
  .has-line{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 12px;
      left: 0;
    }
    span{
      display: inline-block;
      background: #fff;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
      color: red;
    }
    button{
      position: relative;
    }
  }
  .early-collection{
    display: inline-block;
  }
  .ratio-item{
    margin-top: 10px;
    span{
      display: inline-block;
      width: 60px;
    }
  }
</style>